<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatMallLinkComponent/>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-wrap">
        <div class="search-box">
          <input class="inp-search" :placeholder="defaultSearchKeywords" v-model="searchKeywords"/>
          <a class="btn-search" href="javascript:;" @click="search">搜索</a>
        </div>
        <div class="search-suggest-box">
          <ul>
            <li>热门搜索：</li>
            <li v-for="item in searchSuggestKeywords" :key="item">
              <a :href="'/mall/search?keywords=' + item" v-text="item"></a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 页面主体 -->
    <div class="main-container">
      <div class="mall-main-wrap">
        <!-- 商品列表 -->
        <div id="cate-tit-ms" class="cate-wrapper g-flex g-flex-bet g-flex-cns">
          <div class="cate-tit active">推荐</div>
        </div>
        <div class="catechild-itmes">
          <ul class="recommend-list">
            <li v-for="item in recommendList" :key="item.id">
              <a :href="'/mall/commodity'" target="_blank">
                <el-image class="image" :src="item.coverUrl" :alt="item.title"></el-image>
                <div class="g-p10">
                  <div class="g-txtcut g-font16 g-m5-b">{{ item.title }}</div>
                  <div class="g-c-9 g-font14 g-onecut g-m5-b">{{ item.keywords }}</div>
                  <div class="price">{{ item.salePrice }}</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div v-for="thisCommodity in allCommodity">
          <div id="cate-tit-ms" class="cate-wrapper g-flex g-flex-bet g-flex-cns">
            <div class="cate-tit active">{{ thisCommodity.commodityTypeTitle }}</div>
            <div class="cate-more g-flex g-flex-cns">
              <a :href="'/mall/sameCommodity'" class="g-font16 g-c-9 cate-more-ico ncui-icons" target="_blank">更多</a>
            </div>
          </div>
          <div class="catechild-itmes">
            <ul class="recommend-list" v-for="index of (Math.ceil(thisCommodity.commodityList.length / 4))">
              <li v-for="item in thisCommodity.commodityList.slice((index - 1) * 4, (index - 1) * 4 + 4)"
                  :key="item.id">
                <a :href="'/mall/commodity'" target="_blank">
                  <el-image class="image" :src="item.coverUrl" :alt="item.title"></el-image>
                  <div class="g-p10">
                    <div class="g-txtcut g-font16 g-m5-b">{{ item.title }}</div>
                    <div class="g-c-9 g-font14 g-onecut g-m5-b">{{ item.keywords }}</div>
                    <div class="price">{{ item.salePrice }}</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!--        <div style="background: #fff; border-radius: 5px;">-->
        <!--          -->
        <!--          <el-empty description="当前页面正在开发中……"></el-empty>-->
        <!--        </div>-->
      </div>
    </div>

  </div>
</template>

<script>
import FloatMallLinkComponent from '@/components/FloatMallLinkComponentView.vue';

export default {
  components: {
    FloatMallLinkComponent

  },
  data() {
    return {
      pageTitle: '',
      defaultSearchKeywords: '',
      searchKeywords: '',
      searchSuggestKeywords: [],
      allCommodity: [
        {
          id: 1,
          commodityTypeTitle: "绿茶",
          commodityList: [
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },  {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
          ]
        },
        {
          id: 2,
          commodityTypeTitle: "红茶",
          commodityList: [
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },  {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
          ]
        },
        {
          id: 2,
          commodityTypeTitle: "黑茶",
          commodityList: [
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
          ]
        },
        {
          id: 1,
          commodityTypeTitle: "白茶",
          commodityList: [
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
          ]
        },
        {
          id: 1,
          commodityTypeTitle: "乌龙茶",
          commodityList: [
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
          ]
        },
        {
          id: 1,
          commodityTypeTitle: "普洱",
          commodityList: [
            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },

            {
              id: 1,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 2,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 3,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            },
            {
              id: 4,
              categoryId: 2,
              categoryName: "绿茶",
              barCode: "11010101110001",
              title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
              brief: "细、圆、紧、直 鲜爽持久",
              coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
              salePrice: 216,
              keywords: "绿茶,毛尖,信阳毛尖",
              sort: 0,
              isRecommend: 1,
              isPutOn: 1,
              salesCount: 0,
              commentCount: 0,
              positiveCommentCount: 0,
              negativeCommentCount: 0
            }

          ]
        },
      ],
      recommendList: [
        {
          id: 1,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 2,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 3,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 4,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        }

      ]
    }
  },
  methods: {
    getCategoryList() {


    },

    loadPageTitle() {
      this.pageTitle = '茶叶商城 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '大红袍';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadSearchSuggestKeywords() {
      let searchSuggestKeywords = ['车载杯', '煮茶壶', '铁观音', '五宝茶', '小青柑', '苦荞茶'];
      this.searchSuggestKeywords = searchSuggestKeywords;
    },
    search() {
      let keywords = this.searchKeywords;
      if (!keywords) {
        keywords = this.defaultSearchKeywords;
      }
      this.$message({
        message: '您正在尝试搜索【' + keywords + '】，抱歉，此功能尚未实现……',
        type: 'warning'
      });
    }
  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadSearchSuggestKeywords();
  }
}
</script>

<style>

.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.search-container {
  height: 342px;
  background-image: url('../../../public/images/0_search_background.jpg');
}

.search-container .search-wrap {
  padding: 180px 0 0 0;
}

.search-container .search-box {
  width: 720px;
  height: 60px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

.search-container .search-box .inp-search {
  width: 550px;
  height: 60px;
  padding: 0 90px 0 30px;
  opacity: 0.85;
  border: none;
  border-radius: 30px;
  outline: none;
  font-size: 16px;
  color: #666;
}

.search-container .search-box a.btn-search {
  display: inline-block;
  padding: 0 30px;
  width: 50px;
  height: 60px;
  line-height: 60px;
  position: absolute;
  right: 0;
  top: 0;
  background: #6A70E9;
  border-radius: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.search-container .search-suggest-box {
  margin-top: 30px;
}

.search-container .search-suggest-box li {
  display: inline-block;
  color: #ededed;
  margin: 0 10px;
}

.search-container .search-suggest-box li a {
  color: #ededed;
}

.search-container .search-suggest-box li a:hover {
  color: #fff;
  text-decoration: underline;
}

.main-container {
  width: 1200px;
  margin: 0 auto;
}

.cate-tit.active {
  font-weight: 700;
  font-size: 26px;
  color: #333;
}

.cate-wrapper {
  margin-bottom: 20px;
}

.recommend-list {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}

.recommend-list li {
  width: 280px;
  height: 390px;
  background: #fff;
  box-sizing: border-box;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  margin: 0 25px 30px 0;
  padding: 25px;
}

.recommend-list li a {
  color: #000000;
}

.recommend-list li:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.price::before {
  content: "¥";
  margin-right: 5px;
  font-size: 14px;
  font-weight: 400;
}

.price {
  color: #ff5000;
  font-size: 17px;
}

.g-p10 {
  text-align: left;
  padding: 10px;
}

.g-txtcut {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cate-wrapper {
  margin-bottom: 20px;
}

.g-flex-cns {
  align-items: center;
}

.g-flex-bet {
  justify-content: space-between;
}

.g-flex {
  display: flex;
}

.g-m5-b {
  margin-bottom: 5px;
}

.g-font16 {
  font-size: 16px;
}

.g-m5-b {
  margin-bottom: 5px;
}

.g-c-9 {
  color: #999;
}

.g-font14 {
  font-size: 14px;
}

.ncui-icons {
  font-family: "ncicons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.cate-more {
  cursor: pointer;
  user-select: none;
  margin-right: 15px;
}

.cate-more-ico::after {
  content: ">";
  margin-left: 5px;
  font-size: 18px;
}

.cate-more-ico:hover {
  color: #fda400;
}
</style>
